---
import BaseLayout from "../layouts/BaseLayout.astro"
---

<BaseLayout childpage backtotop>
  <div class="container-fluid">
    <div class="row g-3">
      <div class="col">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-body">修改密码</div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-5">
                <form id="form">
                  <div class="row mb-3">
                    <label
                      for="oldPassword"
                      class="col-sm-3 col-form-label text-sm-end"
                      >当前密码</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="password"
                        autocomplete="on"
                        class="form-control"
                        id="oldPassword"
                        name="oldPassword"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="password"
                      class="col-sm-3 col-form-label text-sm-end">新密码</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="password"
                        autocomplete="on"
                        class="form-control"
                        id="password"
                        name="password"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="rePassword"
                      class="col-sm-3 col-form-label text-sm-end"
                      >确认新密码</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="password"
                        autocomplete="on"
                        class="form-control"
                        id="rePassword"
                        name="rePassword"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-sm-9 offset-sm-3">
                      <button type="submit" class="btn btn-primary"
                        >确认修改</button
                      >
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/formValidation.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/framework/bootstrap.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/language/zh_CN.js"
  ></script>

  <script is:inline slot="js">
    //表单验证
    $("#form")
      .formValidation({
        fields: {
          oldPassword: {
            validators: {
              notEmpty: true,
            },
          },
          password: {
            validators: {
              notEmpty: true,
            },
          },
          rePassword: {
            validators: {
              notEmpty: true,
            },
          },
        },
      })
      .on("success.form.fv", function (e) {
        //阻止表单提交
        e.preventDefault()
        //得到表单对象
        const $form = $(e.target)
        const data = $form.serialize()

        //ajax请求
        $.ajax({
          url: "/profile",
          method: "put",
          data,
        }).then(function (response) {
          if (response.code === 200) {
            $.toasts.success()

            //表单重置
            $form[0].reset()
          }
        })
      })
  </script>
</BaseLayout>
